<template>
  <div class="dashboard-editor-container">
    <el-row :gutter="1">
      <el-col :span="20">
        <aside> {{ $t('index.greet') }} <span style="color: #337ab7;">{{ index.name }}</span>
          {{ $t('index.mark') }}{{ $t('index.nowIs') }} <span style="color: #337ab7;">{{ index.dateTime }}</span>
          {{ $t('index.pleaseKeep') }}
        </aside>
      </el-col>
      <el-col :span="4">
        <el-button class="tip" icon="el-icon-question" @click.prevent.stop="guide">
          {{ $t('index.guideButton') }}
        </el-button>
      </el-col>
    </el-row>

    <panel-group :temp="temp" />

    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <todo-list />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="16">
        <el-calendar>
          <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
          <template
            slot="dateCell"
            slot-scope="{date, data}"
          >
            <p :class="data.isSelected ? 'is-selected' : ''">
              {{ data.day.split('-').slice(1).join('-') }} <br> {{ data.isSelected ? '✔️' : '' }}
            </p>
          </template>
        </el-calendar>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import TodoList from '@/views/index/components/TodoList'
import PanelGroup from '@/views/index/components/PanelGroup'
import { getIndexPanel } from '@/api/user'
import Driver from 'driver.js'
import steps from '@/views/index/components/steps'
import 'driver.js/dist/driver.min.css' // import driver.js css

export default {
  name: 'DashboardIndex',
  components: {
    PanelGroup,
    TodoList
  },
  data() {
    return {
      driver: null,
      attendanceDetailsData: {},
      // date: new Date().toLocaleString(),
      // date: this.getDatetime(),
      index: {
        dateTime: '',
        name: 'Real'
      },
      // type 表示该日期的所属月份，可选值有 prev-month，current-month，next-month；
      // isSelected 标明该日期是否被选中；
      // day 是格式化的日期，格式为 yyyy-MM-dd
      data: {
        type: '',
        isSelected: true,
        day: ''
      },
      temp: {
        totalPeople: 0,
        message: 0,
        salary: 0,
        department: 0
      }
    }
  },
  created() {
    this.data.isSelected = true
    const userId = this.$store.getters.id
    getIndexPanel(userId).then(response => {
      const data = response.data
      console.log(data)
      this.temp = data
    })
  },
  // 销毁定时器
  beforeDestroy() {
    if (this.formatDate) {
      clearInterval(this.formatDate) // 在Vue实例销毁前，清除时间定时器
    }
  },
  mounted() {
    this.index.name = this.$store.getters.name
    this.currentTime()
    this.driver = new Driver()
  },
  methods: {
    handleSelected(day) {
      // 默认显示为 0
      let flag = 0
      // this.attendanceDetailsData 是后台返回的数据
      this.attendanceDetailsData.forEach(item => {
        if (item.number === day) {
          // 判断显示数据
          flag = item.number
        }
      })
      return flag
    },
    guide() {
      this.driver.defineSteps(steps)
      this.driver.start()
    },
    currentTime() {
      setInterval(this.formatDate, 500)
    },
    formatDate() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const month = date.getMonth() + 1 // 月
      const day = date.getDate() // 日
      const week = date.getDay() // 星期
      const weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      let hour = date.getHours() // 时
      hour = hour < 10 ? '0' + hour : hour // 如果只有一位，则前面补零
      let minute = date.getMinutes() // 分
      minute = minute < 10 ? '0' + minute : minute // 如果只有一位，则前面补零
      let second = date.getSeconds() // 秒
      second = second < 10 ? '0' + second : second // 如果只有一位，则前面补零
      this.index.dateTime = ` ${year} 年 ${month} 月 ${day} 日 ${hour}:${minute}:${second} ${weekArr[week]}`
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }

  aside {
    height: 45px;
    background-color: white;
  }
  .tip {
    height: 45px;
    background-color: white;
    float: right;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}

/* 一般前面的类名会选当前页面最大父元素的类名，>>>后面跟要修改的类名就可以了 */
.block-bg >>> .el-calendar-table:not(.is-range) td.prev {
  pointer-events: none;
}

/* 简单粗暴 直接找到这个元素 给它隐藏就行了 */
.block-bg >>> .el-calendar__button-group .el-button-group {
  display: none;
}

.is-selected {
  color: #1989FA;
}

</style>
